{% extends 'layout/indexframe.html' %}
{% load static %}
{% block title %}schedule{% endblock %}

{% block css %}
    <style>
        .account {
            border: 1px solid #dddddd;
            border-radius: 10px;
            box-shadow: 10px 10px 10px #aaa;
            padding: 20px 40px;
        }

        td {
            font-size: 20px;
        }

        th {
            font-size: 20px;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
    </style>
    <link href="{% static 'plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight" style="height: 5000px;">

        <div class="col-md-10">
            <div style="margin-bottom: 10px;" class="clearfix">

                <div class="panel panel-default">

                    <div class="panel-heading" style="font-size: 50px;text-align: center;background-color: #9ea6b9">
                        定时计划列表
                    </div>


                    <table class="table">
                        <thead>
                        <tr>
                            <th style="text-align: center;">任务名</th>
                            <th style="text-align: center;">目的Topic</th>
                            <th style="text-align: center;">数据</th>
                            <th style="text-align: center;">任务类型</th>
                            <th style="text-align: center;">产生时间</th>
                            <th style="text-align: center;">
                                <button type="button" class="btn btn-default" style="color: #009900;"
                                        data-container="body"
                                        data-toggle="popover" data-placement="top"
                                        data-content="每一分钟检查一次定时计划有效性">时效性
                                </button>
                            </th>
                            <th style="text-align: center;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for obj in list %}
                            <tr>
                                <td style="text-align: center;">{{ obj.taskname }}</td>
                                <td style="text-align: center;">{{ obj.tasktopic }}</td>
                                <td style="text-align: center;">{{ obj.taskcont }}</td>
                                <td style="text-align: center;">{{ obj.tasktype }}</td>
                                <td style="text-align: center;">{{ obj.tasksavetime }}</td>
                                <td style="text-align: center;">{{ obj.flag }}</td>
                                <td style="text-align: center;">
                                    <a class="btn btn-default btn-xs editbtn" style="font-size: 20px;"
                                       nid={{ obj.id }} href="#"}">查看详情</a>
                                    <a class="btn btn-danger btn-xs delbtn" style="font-size: 20px;"
                                       nid={{ obj.id }} href="#"}">删除</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

        <div class="col-md-2">
            <div style="position: absolute;right: 0px;top: 40px;z-index:200;width: 200px;" id="refresh">
                <div style="font-size:30px;height: 55px;text-align: center;background-color: #dfdfdf;border: 1px solid #dddddd;border-radius: 10px;">
                    定时计划动作
                </div>
                <div class="account">
                    <p style="text-align: left;font-size: 15px">周期不截止任务</p>
                    <p><a class="plan1" href='#'>天计划</a></p>
                    <p><a class="plan2" href="#">周计划</a></p>
                    <p style="text-align: left;font-size: 15px">定时并截止任务</p>
                    <p><a class="plan3" href="#">有截止日期的天计划</a></p>
                    <p><a class="plan4" href="#">有截止日期的周计划</a></p>
                    <p><a class="plan5" href="#">定时发送一次</a></p>

                </div>
            </div>
        </div>
        {#        不截止发布1#}
        <div class="modal fade" id="plan1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>天计划</strong>
                        </h1>
                    </div>
                    <div class="modal-body">
                        <form id="pub1">
                            <div class="clearfix">
                                <div style="margin-left: 100px;">
                                    <div class="form-group">
                                        <h3>任务名</h3>
                                        <input name="taskname1">
                                        <h3>发布Topic</h3>
                                        <select name="tasktopic1">
                                            <option>未选择</option>
                                            {% for pub in pubobj %}
                                                <option>{{ pub.devtopic }}</option>
                                            {% endfor %}
                                        </select>
                                        <h3>时</h3>
                                        <select name="taskhour1">
                                            <option>未选择</option>
                                            <option>每小时</option>
                                            {% for i in perhour %}
                                                <option>{{ i }}</option>
                                            {% endfor %}
                                        </select>
                                        <h3>分</h3>
                                        <select name="taskminute1">
                                            <option>未选择</option>
                                            <option>每分钟</option>
                                            {% for i in perminute %}
                                                <option>{{ i }}</option>
                                            {% endfor %}
                                        </select>

                                    </div>
                                    <div class="form-group">
                                        <h3>发布内容</h3>
                                        <div><textarea name="taskcont1" style="height: 50px;"></textarea></div>
                                        <span id="sendmes1" style="color: #009900;"></span>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="pubbtn1" type="button" class="btn btn-primary" value="保存">

                    </div>
                </div>
            </div>
        </div>
        {#        不截止发布2    #}
        <div class="modal fade" id="plan2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>周计划</strong>
                        </h1>
                    </div>
                    <div class="modal-body">
                        <form id="pub2">
                            <div class="clearfix">
                                <div style="margin-left: 100px;">
                                        <div class="form-group">
                                            <h3>任务名</h3>
                                            <input name="taskname2">
                                            <h3>发布Topic</h3>
                                            <select name="tasktopic2">
                                                <option>未选择</option>
                                                {% for pub in pubobj %}
                                                    <option>{{ pub.devtopic }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>天</h3>
                                            <select name="taskweek2">
                                                <option>未选择</option>
                                                <option>每天</option>
                                                <option>每周一</option>
                                                <option>每周二</option>
                                                <option>每周三</option>
                                                <option>每周四</option>
                                                <option>每周五</option>
                                                <option>每周六</option>
                                                <option>每周天</option>
                                            </select>

                                            <h3>时</h3>
                                            <select name="taskhour2">
                                                <option>未选择</option>
                                                {% for i in perhour %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>分</h3>
                                            <select name="taskminute2">
                                                <option>未选择</option>
                                                {% for i in perminute %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>

                                        </div>
                                        <div class="form-group">
                                            <h3>发布内容</h3>
                                            <div><textarea name="taskcont2" style="height: 50px;"></textarea></div>
                                            <span id="sendmes2" style="color: #009900;"></span>
                                        </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="pubbtn2" type="button" class="btn btn-primary" value="保存">
                    </div>
                </div>
            </div>
        </div>
        {#        截止发布3#}
        <div class="modal fade" id="plan3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" id="myModalLabel" style="text-align: center;">
                            <strong>有截止日期的天计划</strong>
                        </h1>
                    </div>
                    <div class="modal-body">
                        <form id="pub3">
                            <div class="clearfix">
                                <div style="margin-left: 100px;">
                                        <div class="form-group">
                                            <h3>任务名</h3>
                                            <input name="taskname">
                                            <h3>发布Topic</h3>
                                            <select name="tasktopic">
                                                <option>未选择</option>
                                                {% for pub in pubobj %}
                                                    <option>{{ pub.devtopic }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>时</h3>
                                            <select name="taskhour">
                                                <option>未选择</option>
                                                <option>每小时</option>
                                                {% for i in perhour %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>分</h3>
                                            <select name="taskminute">
                                                <option>未选择</option>
                                                <option>每分钟</option>
                                                {% for i in perminute %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>截止日期</h3>
                                            <div class="row">
                                                <div class="col-md-5" id="datatime1">
                                                    <input type="text" class="form-control" name="taskuptodate">
                                                </div>
                                            </div>

                                        </div>
                                        <div class="form-group">
                                            <h3>发布内容</h3>
                                            <div><textarea name="taskcont" style="height: 50px;"></textarea></div>
                                            <span id="sendmes3" style="color: #009900;"></span>
                                        </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="pubbtn3" type="button" class="btn btn-primary" value="保存">
                    </div>
                </div>
            </div>
        </div>
        {#        截止发布4#}
        <div class="modal fade" id="plan4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>周计划</strong>
                        </h1>
                    </div>
                    <div class="modal-body">
                        <form id="pub4">
                            <div class="clearfix">
                                <div style="margin-left: 100px;">
                                        <div class="form-group">
                                            <h3>任务名</h3>
                                            <input name="taskname">
                                            <h3>发布Topic</h3>
                                            <select name="tasktopic">
                                                <option>未选择</option>
                                                {% for pub in pubobj %}
                                                    <option>{{ pub.devtopic }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>天</h3>
                                            <select name="taskweek">
                                                <option>未选择</option>
                                                <option>每天</option>
                                                <option>每周一</option>
                                                <option>每周二</option>
                                                <option>每周三</option>
                                                <option>每周四</option>
                                                <option>每周五</option>
                                                <option>每周六</option>
                                                <option>每周天</option>
                                            </select>

                                            <h3>时</h3>
                                            <select name="taskhour">
                                                <option>未选择</option>
                                                {% for i in perhour %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>分</h3>
                                            <select name="taskminute">
                                                <option>未选择</option>
                                                {% for i in perminute %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>截止日期</h3>
                                            <div class="row">
                                                <div class="col-md-5" id="datatime2">
                                                    <input type="text" class="form-control" name="taskuptodate">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <h3>发布内容</h3>
                                            <div><textarea name="taskcont" style="height: 50px;"></textarea></div>
                                            <span id="sendmes4" style="color: #009900;"></span>
                                        </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="pubbtn4" type="button" class="btn btn-primary" value="保存">
                    </div>
                </div>
            </div>
        </div>
        {#        截止发送5 #}
        <div class="modal fade" id="plan5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" id="myModalLabel" style="text-align: center;"><strong>天计划</strong>
                        </h1>
                    </div>
                    <div class="modal-body">
                        <form id="pub5">
                            <div class="clearfix">
                                <div style="margin-left: 100px;">
                                        <div class="form-group">
                                            <h3>任务名</h3>
                                            <input name="taskname">
                                            <h3>发布Topic</h3>
                                            <select name="tasktopic">
                                                <option>未选择</option>
                                                {% for pub in pubobj %}
                                                    <option>{{ pub.devtopic }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>预计多少天后发布</h3>
                                            <input name="taskweek">
                                            <h3>时</h3>
                                            <select name="taskhour">
                                                <option>未选择</option>
                                                <option>每小时</option>
                                                {% for i in perhour %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>
                                            <h3>分</h3>
                                            <select name="taskminute">
                                                <option>未选择</option>
                                                <option>每分钟</option>
                                                {% for i in perminute %}
                                                    <option>{{ i }}</option>
                                                {% endfor %}
                                            </select>

                                        </div>
                                        <div class="form-group">
                                            <h3>发布内容</h3>
                                            <div><textarea name="taskcont" style="height: 50px;"></textarea></div>
                                            <span id="sendmes5" style="color: #009900;"></span>
                                        </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input id="pubbtn5" type="button" class="btn btn-primary" value="保存">

                    </div>
                </div>
            </div>
        </div>
        {# 定时详情 #}
        <div class="modal fade" id="plandetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="height: 500px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h1 class="modal-title" style="text-align: center;" id="myModalLabel">计划详情</h1>
                    </div>
                    <div class="modal-body">

                        <div class="clearfix">
                            <div>
                                <div class="form-group">
                                    <label>{{ field1.label }}</label>
                                    <h2 id="show1"></h2>
                                    <h2 id="show2"></h2>
                                    <h2 id="show3"></h2>
                                    <h2 id="show4"></h2>
                                    <span id="show5" class="error-msg" style="font-size: 30px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            $('#schedule').addClass('active')
        });
    </script>
    <script>
        $(function () {
            $(window).scroll(function () {
                var top = $(window).scrollTop() + 20;
                $("#refresh").animate({"top": top}, 1);
            });
        });
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
    </script>
    <script>
        $(function () {
            binddelbtn();
            bindplan1();
            bindpub1();
            bindplan2();
            bindpub2();
            bindplan3();
            bindpub3();
            bindplan4();
            bindpub4();
            bindplan5();
            bindpub5();

            bindshowdetail();
        })

        function bindplan1() {
            $('.plan1').click(function () {
                $('#plan1').modal('show');
            });
        }

        function bindplan2() {
            $('.plan2').click(function () {
                $('#plan2').modal('show');
            });
        }

        function bindplan3() {
            $('.plan3').click(function () {
                $("#datatime1 input").datepicker({
                    language: "zh-CN"
                });
                $('#plan3').modal('show');
            });
        }

        function bindplan4() {
            $('.plan4').click(function () {
                $("#datatime2 input").datepicker({
                    language: "zh-CN"
                });
                $('#plan4').modal('show');
            });
        }

        function bindplan5() {
            $('.plan5').click(function () {
                $('#plan5').modal('show');
            });
        }

        function bindpub1() {
            $('#pubbtn1').click(function () {
                $.ajax({
                    url: "/web/schedule/pub1/",
                    type: "POST",
                    data: $("#pub1").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes1').text("制定成功")
                            location.href = '/web/schedule/'
                        } else {
                            if (res.error) {
                                $('#sendmes1').text(res.error)
                            } else {
                                $('#sendmes1').text("失败请检查")
                            }
                        }
                        var time1 = 2
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes1').text("")
                            }
                        }, 1000)
                    }
                })
            })

        }

        function bindpub2() {
            $('#pubbtn2').click(function () {
                $.ajax({
                    url: "/web/schedule/pub2/",
                    type: "POST",
                    data: $("#pub2").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes2').text("制定成功")
                            location.href = '/web/schedule/'
                        } else {
                            if (res.error) {
                                $('#sendmes2').text(res.error)
                            } else {
                                $('#sendmes2').text("失败请检查")
                            }
                        }
                        var time1 = 2
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes2').text("")
                            }
                        }, 1000)
                    }
                })
            })
        }

        function bindpub3() {
            $('#pubbtn3').click(function () {
                $.ajax({
                    url: "/web/schedule/pub3/",
                    type: "POST",
                    data: $("#pub3").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes3').text("制定成功")
                            location.href = '/web/schedule/'
                        } else {
                            if (res.error) {
                                $('#sendmes3').text(res.error)
                            } else {
                                $('#sendmes3').text("失败请检查")
                            }
                        }
                        var time1 = 2
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes3').text("")
                            }
                        }, 1000)
                    }
                })
            })
        }

        function bindpub4() {
            $('#pubbtn4').click(function () {
                $.ajax({
                    url: "/web/schedule/pub4/",
                    type: "POST",
                    data: $("#pub4").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes4').text("制定成功")
                            location.href = '/web/schedule/'
                        } else {
                            if (res.error) {
                                $('#sendmes4').text(res.error)
                            } else {
                                $('#sendmes4').text("失败请检查")
                            }
                        }
                        var time1 = 2
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes4').text("")
                            }
                        }, 1000)
                    }
                })
            })
        }

        function bindpub5() {
            $('#pubbtn5').click(function () {
                $.ajax({
                    url: "/web/schedule/pub5/",
                    type: "POST",
                    data: $("#pub5").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#sendmes5').text("制定成功")
                            location.href = '/web/schedule/'
                        } else {
                            if (res.error) {
                                $('#sendmes5').text(res.error)
                            } else {
                                $('#sendmes5').text("失败请检查")
                            }
                        }
                        var time1 = 2
                        var event = setInterval(function () {
                            time1 = time1 - 1;
                            if (time1 == 0) {
                                clearInterval(event);
                                $('#sendmes5').text("")
                            }
                        }, 1000)
                    }
                })
            })

        }

        function binddelbtn() {
            $(".delbtn").click(function () {
                nid = $(this).attr('nid');
                $.ajax({
                    url: "/web/schedule/del/",
                    type: "GET",
                    data: {'nid': nid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            window.location.reload();
                        } else {
                            alert("error del")
                        }
                    }
                })
            })
        }

        function bindshowdetail() {
            $('.editbtn').click(function () {
                nid = $(this).attr('nid');
                $.ajax({
                    url: "/web/schedule/detail/",
                    type: "GET",
                    data: {'nid': nid},
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            $('#show1').text(res.str1);
                            $('#show2').text(res.str2);
                            $('#show3').text(res.str3);
                            $('#show4').text(res.str4);
                            if (res.flag == '过期失效') {
                                $('#show5').text('已经过期失效，请注意')
                            }
                            $('#plandetail').modal('show');
                        } else {
                            alert("error");
                        }
                    }
                })


            });
        }
    </script>


{% endblock %}